html {
  box-sizing: border-box;
  font-size: 62.5%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  width: 100%;
  height: 100vh;
  background-color: #111;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
}

.wrapper {
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
}
.wrapper form {
  margin: 0 0 1em 0;
}
.wrapper form:last-of-type {
  margin-bottom: 0;
}

.knob-group {
  position: relative;
  display: inline-block;
  background-color: #2c2d2f;
  padding: 0 0.5em;
  border-radius: 0.2rem;
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.knob-group legend {
  position: relative;
  display: block;
  width: auto;
  line-height: 1.5;
  text-align: left;
  padding: 0.5em 0.5em 0.25em 0.5em;
  white-space: nowrap;
  background-color: #2c2d2f;
  z-index: 2;
  outline: 0;
}
.knob-group legend::before {
  content: "";
  position: relative;
  display: block;
  height: 0.5em;
  width: 0.5em;
  float: left;
  border-radius: 50%;
  background-color: magenta;
  cursor: pointer;
  transition: background 0.2s linear;
  margin: 0.5em 0.25em 0 -0.25em;
}
.knob-group legend::after {
  position: absolute;
  font-size: 0.5em;
  padding: 0.5em 1em;
  background-color: #2c2d2f;
  font-weight: 600;
  right: 0.125em;
  top: 0.625em;
}
.knob-group legend:focus::before {
  box-shadow: 0 0 0 0.2em rgba(255, 0, 255, 0.25);
}
.knob-group legend:focus-visible::after {
  content: attr(data-key);
}
.knob-group hr {
  position: absolute;
  display: inline-block;
  width: calc(100% - 1em);
  margin: 0;
  padding: 0;
  top: 1.25em;
  right: 0.5em;
  border: 0;
  border-top: 1px solid currentColor;
  z-index: 1;
}
.knob-group .knob {
  --knob-deg: 0;
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
  padding-bottom: 2em;
  width: 4em;
  border: 0;
  text-align: center;
  touch-action: none;
  font-size: 1rem;
}
.knob-group .knob.knob-small {
  font-size: 0.75rem;
}
.knob-group .knob.knob-balance hr,
.knob-group .knob.knob-balance i {
  position: absolute;
  top: 5.1538461538em;
  left: 0;
  width: 100%;
  border: 0;
  font-size: 0.65em;
  font-style: normal;
  line-height: 2.5;
  color: #888;
}
.knob-group .knob.knob-balance hr::before, .knob-group .knob.knob-balance hr::after,
.knob-group .knob.knob-balance i::before,
.knob-group .knob.knob-balance i::after {
  position: absolute;
}
.knob-group .knob.knob-balance hr::before,
.knob-group .knob.knob-balance i::before {
  content: attr(data-min);
  left: 0;
}
.knob-group .knob.knob-balance hr::after,
.knob-group .knob.knob-balance i::after {
  content: attr(data-max);
  right: 0;
}
.knob-group .knob svg path {
  stroke-dasharray: 87 10 87;
}
.knob-group .knob svg path:last-of-type {
  stroke-dashoffset: 0;
}
.knob-group .knob input {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
  position: relative;
  left: 0;
  top: 0;
  display: block;
  width: 5.3333333333em;
  height: 1.5em;
  font: inherit;
  font-size: 0.75em;
  line-height: 1em;
  color: currentColor;
  font-variant-numeric: tabular-nums lining-nums;
  background-color: transparent;
  border: 0;
  margin: 5.8333333333em 0 0 0;
  padding: 0 !important;
  outline: 0;
  cursor: default;
  z-index: 2;
  caret-color: currentColor;
}
.knob-group .knob input::-moz-placeholder {
  opacity: 1;
  color: currentColor;
}
.knob-group .knob input::placeholder {
  opacity: 1;
  color: currentColor;
}
.knob-group .knob input::-moz-selection {
  color: currentColor;
  background-color: rgba(255, 0, 255, 0);
}
.knob-group .knob input::selection {
  color: currentColor;
  background-color: rgba(255, 0, 255, 0);
}
.knob-group .knob input::-webkit-outer-spin-button, .knob-group .knob input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.knob-group .knob input:focus_ {
  color: currentColor;
  background-color: magenta;
}
.knob-group .knob[disabled], .knob-group .knob[readonly] {
  cursor: not-allowed;
}
.knob-group .knob[disabled] ~ *, .knob-group .knob[disabled] ~ *::before, .knob-group .knob[disabled] ~ *::after, .knob-group .knob[readonly] ~ *, .knob-group .knob[readonly] ~ *::before, .knob-group .knob[readonly] ~ *::after {
  pointer-events: none;
}
.knob-group .knob[disabled]::-moz-selection, .knob-group .knob[readonly]::-moz-selection {
  background-color: transparent;
}
.knob-group .knob[disabled]::selection, .knob-group .knob[readonly]::selection {
  background-color: transparent;
}
.knob-group .knob label {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding-top: 6em;
  font-size: 1em;
  white-space: nowrap;
  text-overflow: ellipsis;
  z-index: 1;
}
.knob-group .knob label::before, .knob-group .knob label::after {
  position: absolute;
  display: inline-block;
}
.knob-group .knob label::before {
  content: "";
  left: 50%;
  top: 0.5em;
  width: 3.5em;
  height: 3.5em;
  border: 0.5em solid #181b1c;
  border-radius: 50%;
  background-color: transparent;
  background: linear-gradient(to bottom, currentColor 0% 100%) no-repeat 50% 0%;
  background-size: 0.2em 1em;
  transform-origin: center;
  transform: translateX(-50%) rotate(0);
  transform: translateX(-50%) rotate(calc(1deg * var(--knob-deg)));
  cursor: default;
  pointer-events: fill;
}
.knob-group .knob label::after {
  content: attr(data-unit);
  top: 5.0538461538em;
  right: 0;
  font-size: 0.65em;
  line-height: 2.5;
  color: #888;
}
.knob-group .knob svg {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  stroke-dasharray: 184 184;
  fill: none;
  stroke: currentColor;
  z-index: 3;
  width: 4.5em;
  height: 4.5em;
}
.knob-group .knob svg path {
  stroke-width: 5;
  stroke-dashoffset: 0;
  visibility: visible;
  pointer-events: stroke;
  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}
.knob-group .knob svg path:first-of-type {
  stroke: magenta;
}
.knob-group .knob svg path:last-of-type {
  stroke: #888;
  stroke-dashoffset: -97;
}